<template>
  <div class="product-list">
    <h2>商品列表</h2>
    <div class="category-filter">
      <button
        v-for="category in categories"
        :key="category.id"
        @click="selectCategory(category.slug)"
        :class="{ active: selectedCategory === category.slug }"
      >
        {{ category.name }}
      </button>
    </div>
    <div class="products">
      <div
        v-for="product in filteredProducts"
        :key="product.id"
        class="product-card"
        @click="goToDetail(product.id)"
      >
        <div class="product-image">
          <img :src="product.image" :alt="product.name">
        </div>
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p class="price">¥{{ product.price }}</p>
          <p class="description">{{ product.description }}</p>
          <button
            class="add-to-cart"
            @click.stop="addToCart(product)"
          >
            加入购物车
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore, useCategoryStore } from '@/store'
import { fetchProducts } from '@/api/mockData'

const router = useRouter()
const cartStore = useCartStore()
const categoryStore = useCategoryStore()
const products = ref([])

onMounted(async () => {
  products.value = await fetchProducts()
})

const filteredProducts = computed(() => {
  if (categoryStore.selectedCategory === 'all') {
    return products.value
  }
  return products.value.filter(
    product => product.category === categoryStore.selectedCategory
  )
})

const goToDetail = (id) => {
  router.push(`/products/${id}`)
}

const addToCart = (product) => {
  try {
    cartStore.addToCart(product)
    alert('商品已成功加入购物车')
  } catch (error) {
    alert(error.message)
  }
}

const selectCategory = (slug) => {
  categoryStore.selectCategory(slug)
}
</script>

<style scoped>
.product-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.category-filter {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5rem;
}

.category-filter button {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.category-filter button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.product-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 1rem;
}

.price {
  color: #e63946;
  font-weight: bold;
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.description {
  color: #666;
  margin-bottom: 1rem;
}

.add-to-cart {
  width: 100%;
  padding: 0.5rem;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-to-cart:hover {
  background: #3aa876;
}
</style>
